<template>
	<div class="system-user-dialog-container">
		<el-dialog
			v-bind="$attrs"
			v-model="state.dialog.isShowDialog"
			:title="state.dialog.title"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form
				ref="dialogFormRef"
				:model="state.ruleForm"
				:size="themeConfig.globalComponentSize"
				label-width="auto"
			>
				<el-row :gutter="36">
					<template v-for="val in props.options">
						<el-col
							v-if="!val.isHide"
							:key="val.prop"
							:xs="24"
							:sm="val.size === 'large' ? 24 : 12"
							:md="val.size === 'large' ? 24 : 12"
							:lg="val.size === 'large' ? 24 : 12"
							:xl="val.size === 'large' ? 24 : 12"
							class="mb20"
						>
							<el-form-item
								:label="val.label"
								:prop="val.prop"
								:rules="[
									{
										required: val.required,
										message: `${val.label}不能为空`,
										trigger: val.type === 'input' ? 'blur' : 'change',
									},
								]"
							>
								<el-input
									v-if="val.type === 'input'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									clearable
									style="width: 100%"
								/>
								<el-input-number
									v-else-if="val.type === 'number'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:min="val.min"
									:max="val.max"
									:step="val.step"
									:precision="val.precision"
									:disabled="val.disabled"
									style="width: 100%"
								/>
								<el-switch
									v-else-if="val.type === 'switch'"
									v-model="state.ruleForm[val.prop]"
									:active-value="val.options ? val.options[0].value : 1"
									:active-text="val.options ? val.options[0].label : '是'"
									:inactive-value="val.options ? val.options[1].value : 0"
									:inactive-text="val.options ? val.options[1].label : '否'"
									:disabled="val.disabled"
								/>
								<el-radio-group
									v-else-if="val.type === 'radio'"
									v-model="state.ruleForm[val.prop]"
									:disabled="val.disabled"
								>
									<el-radio v-for="item in val.options" :label="item.value">{{ item.label }}</el-radio>
								</el-radio-group>
								<el-select
									v-else-if="val.type === 'select'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									clearable
									filterable
									style="width: 100%"
								>
									<el-option
										v-for="item in val.options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
								<el-select
									v-else-if="val.type === 'multiSelect'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									multiple
									clearable
									filterable
									style="width: 100%"
								>
									<el-option
										v-for="item in val.options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
								<el-tree-select
									v-else-if="val.type === 'treeSelect'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:data="val.options || []"
									:props="
										val.treeProps || {
											label: 'label',
											value: 'id',
											children: 'children',
											disabled: 'disabled',
										}
									"
									:check-strictly="val.isCheckStrictly"
									:filter-node-method="(value: string, data: EmptyObjectType) => filterTreeNode(value, data, val.treeProps)"
									:disabled="val.disabled"
									filterable
									clearable
									node-key="id"
									style="width: 100%"
								/>
								<el-date-picker
									v-else-if="val.type === 'date'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									type="date"
									style="width: 100%"
								/>
								<el-time-picker
									v-else-if="val.type === 'time'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									style="width: 100%"
								/>
								<el-date-picker
									v-else-if="val.type === 'datetime'"
									v-model="state.ruleForm[val.prop]"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									type="datetime"
									style="width: 100%"
								/>
								<el-cascader
									v-else-if="val.type === 'cascader'"
									v-model="state.ruleForm[val.prop]"
									:options="val.cascaderOptions || []"
									:props="val.cascaderProps"
									:placeholder="val.placeholder"
									:disabled="val.disabled"
									filterable
									clearable
									style="width: 100%"
								/>
								<el-date-picker
									v-else-if="val.type === 'dateRange'"
									v-model="state.ruleForm[val.prop]"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									type="daterange"
									:disabled="val.disabled"
									style="width: 100%"
								/>
								<el-time-picker
									v-else-if="val.type === 'timeRange'"
									v-model="state.ruleForm[val.prop]"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									is-range
									:disabled="val.disabled"
									style="width: 100%"
								/>
								<el-date-picker
									v-else-if="val.type === 'datetimeRange'"
									v-model="state.ruleForm[val.prop]"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									type="datetimerange"
									:disabled="val.disabled"
									style="width: 100%"
								/>
								<template v-else-if="val.type === 'slot'">
									<slot :name="val.prop" :ruleForm="state.ruleForm"></slot>
								</template>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="default" @click="onCancel">取 消</el-button>
					<el-button type="info" @click="onReset">重 置</el-button>
					<el-button type="primary" @click="onSubmit">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="tableDialog">
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";

// 定义父组件传过来的值
interface TableDialogProps {
	title: string; // 弹窗标题
	options: TableDialogOptionsType[]; // 弹窗选项
}
const props = defineProps<TableDialogProps>();

// 定义父组件可触发的事件
const emit = defineEmits(["submit", "onInited"]);

// 定义变量内容
const { themeConfig } = storeToRefs(useThemeConfig());
const dialogFormRef = ref();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: "",
		title: "",
		submitTxt: "",
	},
	ruleForm: {} as EmptyObjectType, // 表单数据
});

// 打开弹窗
const openDialog = (type: string, row: EmptyObjectType) => {
	// 表单赋予默认值（用于重置表单数据）
	if (type === "edit") {
		state.ruleForm.id = row.id;
		props.options.forEach(item => {
			state.ruleForm[item.prop] = row[item.prop];
		});
		state.dialog.title = "修改 " + props.title;
		state.dialog.submitTxt = "修 改";
	} else if (type === "add") {
		state.ruleForm.id = null;
		props.options.forEach(item => {
			state.ruleForm[item.prop] = item.defaultValue;
		});
		state.dialog.title = "新增 " + props.title;
		state.dialog.submitTxt = "新 增";
	} else if (type === "parent") {
		state.ruleForm.id = null;
		state.ruleForm.parent = row.id;
		props.options
			.filter(item => item.prop !== "parent")
			.forEach(item => {
				state.ruleForm[item.prop] = item.defaultValue;
			});
		state.dialog.title = "新增 " + props.title;
		state.dialog.submitTxt = "新 增";
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	emit("onInited");
	console.log("openDialog -> " + type, state.ruleForm);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
	console.log("onCancel", state.ruleForm);
};
// 重置
const onReset = () => {
	dialogFormRef.value.resetFields();
	console.log("onReset", state.ruleForm);
};
// 提交
const onSubmit = () => {
	dialogFormRef.value.validate((valid: boolean) => {
		if (valid) {
			emit("submit", state.dialog.type, JSON.parse(JSON.stringify(state.ruleForm)));
		}
	});
	console.log("onSubmit", state.dialog.type, state.ruleForm);
};

// treeSelect 过滤方法
const filterTreeNode = (value: string, data: EmptyObjectType, treeProps?: EmptyObjectType) => {
	if (!value) return true;
	return data[treeProps?.label || "label"].includes(value);
};

// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
	ruleForm: state.ruleForm,
});
</script>

<style scoped lang="scss"></style>
